/*
  Copyright 2011 Google Inc.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

  Original version: Martin Gorner (mgorner@google.com)
*/
/*
CSS tranasition reference
	-webkit-transition: [shorthand for the below, but only one CSS property can be in this list]
	-webkit-transition-property: all [multiple CSS properties allowed, separated by commas]
	-webkit-transition-duration: [example values: 1s 500ms]
	-webkit-transition-timing-function: [default ease-in ease-out ease-in-out linear cubic-bezier]

example properties that can be animated
	left, right, top, bottom, margin, border, padding
	opacity
	-webkit-transform: rotate, rotateX, rotateY, rotateZ, translateX, translateY, translateZ, scale, skew
	-webkit-transform-style: preserve-3d, flat
*/
.movable
{
	position: absolute;
}

/*************************************/

#tile_bberry
{
	transition: 1000ms ease-out;
	transition-property: all;
	transform-style: preserve-3d;
	/*background-color: red;*/ /* uncomment to show background - makes understanding easier*/
	height: 270px; /* bad: chrome adds 4 stray pixels without this */
}
#tile_bberry.begin
{
	left: 570px;
	top: 570px;
}
#tile_bberry.end
{
	left: -280px;
	top: 10px;
	transform: rotateY(180Deg) rotateX(360Deg) rotateZ(180Deg);
}
#tile_bberry img
{
	position: relative;
}

/*************************************/

#tile_world
{
	left: 290px;
	top: 570px;
	transform-origin: 0 100%;
}
#tile_world.begin
{
	animation: skewanim2 1s cubic-bezier(0,0.5,0.3,1);
}
#tile_world.end
{
	left: -280px;
	top: 10px;
	animation: skewanim 1s cubic-bezier(0,0.5,0.3,1);
}

@keyframes skewanim
{
	from
	{
		left: 290px;
		top: 570px;
	}
	70%
	{
		left: -280px;
		top: 10px;
		transform: skew(10Deg, 0Deg);
	}
	to
	{
		left: -280px;
		top: 10px;
	}
}

@keyframes skewanim2
{
	from
	{
		left: -280px;
		top: 10px;
	}
	70%
	{
		left: 290px;
		top: 570px;
		transform: skew(-10Deg, 0Deg);
	}
	to
	{
		left: 290px;
		top: 570px;
	}
}

/*************************************/

#tile_computer
{
	left: 10px;
	top: 570px;
}
#tile_computer.begin
{
	animation: scaleanim2 1s;
}
#tile_computer.end
{
	left: -280px;
	top: 10px;
	animation-name: scaleanim;
    animation-duration: 1s;
    animation-iteration-count: 1; /* 2, 3, ... infinite */
    animation-timing-function: default; /* ease-in, ease-out, ...*/
    animation-direction: normal; /* normal, alternate */
    /*animation-delay: */
}
@keyframes scaleanim
{
	from
	{
		left: 10px;
		top: 570px;
	}
	50%
	{
		left: -280px;
		top: 10px;
		transform: scale(0.5);
	}
	to
	{
		left: -280px;
		top: 10px;
	}
}

@keyframes scaleanim2
{
	from
	{
		left: -280px;
		top: 10px;
	}
	50%
	{
		left: 10px;
		top: 570px;
		transform: scale(0.5);
	}
	to
	{
		left: 10px;
		top: 570px;
	}
}

/*************************************/

#tile_game
{
	transition: 1000ms ease-out;
	transition-property: all;
	transform-origin: 0 0;
}
#tile_game.begin
{
	left: 570px;
	top: 290px;
}
#tile_game.end
{
	left: -280px;
	top: 10px;
	transform: rotate(360Deg);
}

/*************************************/

#tile_phone
{
	transition: 1000ms ease-out;
	transition-property: all;
}
#tile_phone.begin
{
	left: 290px;
	top: 290px;
}
#tile_phone.end
{
	left: -280px;
	top: 10px;
    transform: rotateX(360Deg);
}

/*************************************/

#tile_usb
{
	transition: 1000ms ease-out;
	transition-property: all;
}
#tile_usb.begin
{
	left: 10px;
	top: 290px;
}
#tile_usb.end
{
	left: -280px;
	top: 10px;
	transform: rotate(360Deg);
	
}
/*************************************/

#tile_browser
{
	transition: 1000ms ease-out;
	transition-property: all;
}
#tile_browser.begin
{
	left: 570px;
	top: 10px;
	opacity: 1;
}
#tile_browser.end
{
	left: -280px;
	top: 10px;
	opacity: 0.1;
}

/*************************************/

#tile_console
{
	transition: 1000ms cubic-bezier(0, 0.7, 1, 0.3);
	transition-property: all;
}
#tile_console.begin
{
	left: 290px;
	top: 10px;
}
#tile_console.end
{
	left: -280px;
	top: 10px;
}

/*************************************/

#tile_user
{
	transition: 500ms ease-out;
	transition-property: all;
}
#tile_user.begin
{
	left: 10px;
	top: 10px;
}
#tile_user.end
{
	left: -280px;
	top: 10px;
}


